<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-07 14:31:43
 * @心得体会: 无
-->

<template>  
  <el-form :model="form" label-width="120px" class="w-1/3">  
    <el-form-item label="类型">  
      <el-select v-model="form.status" placeholder="请选择">  
        <el-option label="入库" value="1"></el-option>  
        <el-option label="出库" value="0"></el-option>  
      </el-select>  
    </el-form-item>  
    <el-form-item label="药品名称">  
      <el-input v-model="form.drugName" placeholder="请选择">
        <template #append>
          <el-button type="primary" @click="toSelete">选择</el-button>
        </template>
      </el-input>
    </el-form-item>  
    <el-form-item label="数量">  
      <el-input type="number" v-model.number="form.number"></el-input>  
    </el-form-item>  
    <!-- <el-form-item label="单位">  
      <el-input v-model="form.unit"></el-input>  
    </el-form-item>   -->
    <el-form-item label="生产厂家">  
      <el-input v-model="form.manufacturer"></el-input>  
    </el-form-item>  
    <el-form-item label="有效日期">  
      <el-date-picker
      v-model="form.validity" 
        type="datetime"
        placeholder="Select date and time"
      />
    </el-form-item> 
    <el-form-item label="生产日期">  
      <el-date-picker
      v-model="form.manufactureDate" 
        type="datetime"
        placeholder="Select date and time"
      />
    </el-form-item>  
    <el-form-item label="备注">  
      <el-input v-model="form.remark" type="textarea"/>
    </el-form-item>  
    <el-form-item>  
      <el-button type="primary" @click="submitForm">提交</el-button>  
      <el-button @click="resetForm">重置</el-button>  
    </el-form-item>  
  </el-form>  
  <el-dialog v-model="drugListVisible" title="添加药品" width="40%">
      <el-input v-model="drugName" class="w-40"></el-input><el-button type="primary" @click="onSearch">搜索</el-button>
      <el-scrollbar height="400px">
        <el-table :data="drugList" style="width: 100%">  
          <el-table-column type="index" label="序列号" width="80px" align="center"></el-table-column>  
          <el-table-column prop="drugName" label="药品名称" align="center"></el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template #default="scope">
              <el-button type="text" @click="selectDrug(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getDrugs, add } from '@/api/user/inout.js'
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query)
let form = reactive({
  status: "",
  drugName: '',
  number: 0,
  unit: '',
  manufacturer: '',
  validity: '',
  remark: '',
  drugId: '',
  manufactureDate:""
})
const drugListVisible = ref(false)
let drugList = reactive()
let drugName = ref('null')

function submitForm() {  
  console.log('提交表单', form);  
  // 在这里可以添加提交表单的逻辑，如发送到 API  
  add(form).then(res=>{
    if(res.code == 200){
      form = reactive({
        status: "",
        drugName: '',
        number: 0,
        unit: '',
        manufacturer: '',
        validity: '',
        remark: '',
        drugId: '',
        manufactureDate:""
      })
      ElMessage.success('提交成功！');
    }
  })
  
}
function resetForm() {  
  ElMessage.warning('重置成功！');
  form = reactive({
        status: "",
        drugName: '',
        number: 0,
        unit: '',
        manufacturer: '',
        validity: '',
        remark: '',
        drugId: '',
        manufactureDate:""
      })
}

function toSelete() {
  console.log("选择")
  drugListVisible.value = true
}
initData()
// 初始化方法
function initData(){
  getDrugs(drugName.value).then(res =>{
    console.log(res)
    // 初始化表格数据
    drugList = reactive(res.data)
  })
  if(route.query){
    // 初始化
    form.drugId = route.query.drugId
    form.drugName = route.query.drugName
    form.unit = route.query.unit
    form.status  = route.query.type
  }
  
}
const onSearch = () => {
  console.log("搜索")
  initData()
}
const selectDrug = (row) => {
  console.log(row)
  drugListVisible.value = false
  form.drugName = row.drugName
  form.unit = row.unit
  form.drugId = row.drugId
}

</script>

<style scoped>

</style>